<template>
	<div class="DD1">
		<div class="danH">
			<span>
				<svg-icon iconClass="back" @click="handGG"></svg-icon>
			</span>
			<span class="stex">订单详情</span>
			<span class="wwxx">管理</span>
		</div>
		<van-loading
			size="24px"
			vertical
			text-color="#0094ff"
			color="#0094ff"
			v-if="flag"
			>加载中...</van-loading
		>
		<div class="menu_11">
			<span>交易金额</span>
			<span> ￥{{ data.price }}.00</span>
		</div>
		<div class="menu_1">
			<span>微信订单号</span>
			<span>{{ data.id }}</span>
		</div>
		<div class="menu_1">
			<span>交易订单号</span>
			<span>hr1p5nt{{ data.id }}7wj</span>
		</div>
		<div class="menu_1">
			<span>交易时间</span>
			<span>{{ this.timer }}</span>
		</div>
		<div class="menu_1">
			<span>支付方式</span>
			<span>{{ this.arr[data.flag] }}</span>
		</div>
		<div class="menu_1">
			<span>订单类型</span>
			<span>{{ this.arr2[data.flag] }}</span>
		</div>
		<div class="menu_1">
			<span>操作员</span>
			<span>00{{ data.flag }}</span>
		</div>
		<div class="menu_1">
			<span>订单状态</span>
			<span>成功</span>
		</div>
		<div class="menu_2" @click="handGa">完成</div>
		<div class="menu_3" @click="handDa">投诉</div>
	</div>
</template>

<script>
import { Dialog } from "vant";
export default {
	components: {
		[Dialog.Component.name]: Dialog.Component,
	},
	data() {
		return {
			data: [],
			timer: "",
			arr: ["网银支付", "微信支付", "支付宝支付", "花呗支付"],
			arr2: ["学习教育", "生活费用", "游戏充值", "直播砸钱"],
			num: 3000,
			flag: false,
		};
	},
	created() {
		this.data = this.$route.query.item;
		// this.timer = new Date().getTime();
		this.timer = this.getTimer();
		//获取当前年月日星期几几点几分几秒并打印
	},
	methods: {
		handDa() {
			Dialog.confirm({
				title: "真的要投诉吗？",
				message: `将要回去投诉中心...`,
			})
				.then(() => {})
				.catch(() => {});
		},
		handGa() {
			this.flag = true;
			Dialog.confirm({
				title: "支付成功",
				message: `将要回到订单中心...`,
			})
				.then(() => {
					setTimeout(() => {
						this.$router.go(-1);
						this.flag = false;
					}, 2000);
				})
				.catch(() => {});
		},
		handGG() {
			this.$router.push("/orderlist");
		},
		getTimer() {
			var date = new Date();
			var week = [
				"/周日",
				"/周一",
				"/周二",
				"/周三",
				"/周四",
				"/周五",
				"/周六",
			];
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var datee = date.getDate();
			var day = date.getDay();
			var time = year + "/" + month + "/" + datee + week[day] + "/";
			function getTimerr() {
				var time = new Date();
				var hour = time.getHours();
				hour = hour < 10 ? "0" + hour : hour;
				var minute = time.getMinutes();
				minute = minute < 10 ? "0" + minute : minute;
				var second = time.getSeconds();
				second = second < 10 ? "0" + second : second;
				return hour + ":" + minute + ":" + second;
			}
			return time + "" + getTimerr();
		},
	},
};
</script>

<style lang='scss'>
@import "../../assets/css/style";
.DD1 {
	height: 100%;
	background: #fff;
	font-size: px2rem(14);
}

.danH {
	font-size: $titleSize;
	background: none;
	display: flex;
	height: px2rem(50);
	line-height: px2rem(50);
	justify-content: space-between;
	background: #fff;
	padding: 0 px2rem(15);
}

.wwxx {
	font-size: px2rem(5);
}
.menu_4 {
	height: px2rem(18.5);
}
.menu_1 {
	display: flex;
	width: 100%;
	height: px2rem(56);
	align-items: center;
	padding: 0 px2rem(18);
	justify-content: space-between;
	color: #666;
}
.menu_11 {
	display: flex;
	width: 100%;
	height: px2rem(56);
	align-items: center;
	padding: 0 px2rem(18);
	justify-content: space-between;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-weight: 600;
}
.menu_2 {
	font-weight: bold;
	margin: 0 auto;
	display: flex;
	width: 83%;
	height: px2rem(45);
	align-items: center;
	padding: 0 px2rem(18);
	justify-content: center;
	border: 1px solid red;
	color: #fff;
	background: red;
	border-radius: px2rem(12);
	margin-bottom: px2rem(10);
}
.menu_3 {
	font-weight: bold;

	margin: 0 auto;
	display: flex;
	width: 83%;
	height: px2rem(45);
	align-items: center;
	padding: 0 px2rem(18);
	justify-content: center;
	border: 2px solid #ccc;
	color: #ccc;
	border-radius: px2rem(12);
}
.van-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>